<template>
  <div id="licence-query">
    <section class="form">
      <ul>
        <li>
          <label for="licence">车牌号</label>
          <span>桂</span>
          <input
            v-model="licence"
            type="text"
            id="licence"
            maxlength="7"
            placeholder="请输入车牌号码">
        </li>
      </ul>
      <div class="query">
        <a @click="query" :disabled="submitDisabled">查询</a>
        <router-link
          to="/fill-owner-info?type=new"
          tag="button"
          v-if="showNewButton">新车未上牌</router-link>
      </div>
    </section>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: "licence-query",
    props: ['showNewButton', 'type'],
    data() {
      return {
        licence: '',
        submitDisabled: false
      }
    },
    methods: {
      query() {
        if (!this.licence) {
          Toast('请输入车牌号');
        } else if (this.type === 'queryInfo') {
          this.$http.post({
            api: this.$api.INSURANCE_LICENCE,
            params: {
              plate_num: '桂' + (this.licence).toUpperCase()
            },
            success: (res) => {
              this.$tool.whenToast(
                () => {
                  this.submitDisabled = true;
                },
                {
                  message: '已查出记录，即将跳转...',
                  className: 'public-long-toast',
                  duration: 1200
                },
                () => {
                  sessionStorage.setItem('info', this.$tool.qs.stringify(res.data.data));
                  this.$router.push({
                    name: 'IndexCheckInfoConfirm',
                    params: {
                      type: 'continue',
                      id: res.data.data.car_owner_id,
                      car_id: res.data.data.car_id || 'none'
                    }
                  });
                },1200
              )
            },
            failure: (res) => {
              this.$tool.whenToast(
                () => {
                  this.submitDisabled = true;
                },
                {
                  message: res.data.msg,
                  duration: 1200
                },
                () => {
                  this.$router.push({
                    name: 'FillOwnerInfo',
                    query: {
                      type: 'add',
                      plate_num: '桂' + (this.licence).toUpperCase()
                    }
                  });
                },1200
              )
            }
          });
        } else if (this.type === 'queryOrder') {
          this.$http.post({
            api: this.$api.USER_FINISHED_ORDER_DETAIL,
            params: {
              user_id: localStorage.getItem('id'),
              plate_num: '桂' + (this.licence).toUpperCase()
            },
            success: (res) => {
              let orders = {
                arr: res.data.data,
                num:  res.data.data.length
              };
              sessionStorage.setItem('orders', this.$tool.qs.stringify(orders));
              this.$router.push({
                name: 'IndexFinishedOrders'
              });
            }
          });
        }
      }
    },
    created() {
      sessionStorage.removeItem('info');
      sessionStorage.removeItem('order');
    }
  }
</script>

<style scoped lang="scss">

  #licence-query {

    $this-public-gap: 1rem;

    $form-grid-line: 1px solid #eee;
    $form-row-height: 5rem;

    >.form {
      >ul {
        padding: 0 $this-public-gap;
        background: $white;

        >li {
          display: flex;
          align-items: center;
          height: $form-row-height;
          border-bottom: $form-grid-line;

          >label {
            width: 7rem;
            height: $size-as-parent;
            line-height: $form-row-height;
            font-size: 1.5rem;
            color: #333;
            border-right: $form-grid-line;
          }

          >input {
            width: 14rem;
            height: $size-as-parent;
            padding-left: .8rem;
            font-size: 1.3rem;
            color: #333;
          }

          &:nth-of-type(1) {
            position: relative;

            >span {
              margin-left: .8rem;
              font-size: 1.3rem;
              line-height: $form-row-height;
              color: #333;
            }
          }
        }
      }

      >.query {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 8.1rem;
        background: $white;
        padding: 0 2rem;

        >a, button {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex: 1;
          height: 4rem;
          font-size: 1.8rem;
          border-radius: 8px;
        }

        >a {
          color: $white;
          background: #0097ff;
          border: 1px solid transparent;
        }

        >button {
          color: #0196ff;
          background: #fff;
          border: 1px solid #0196ff;
          margin-left: 20px;
        }
      }
    }
  }
</style>

